<template>
  <div class="swiper">
    <img :style="{opacity: opacity}" :src="images[current]" />
    <ul>
      <li
      @mouseover="current = index"
      :class="{current: index === current}"
      v-for="(item, index) in images.length"
      :key="index"></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      opacity: 1,
      interval: null,
      seconds: 4000,
      current: 0,
      images: [
        'https://imgcps.jd.com/ling/11212486905/5aWz56We6KOF5a626ZKc5oOg/5q-P5ruhMzAw5YePMzA/p-5bd8253082acdd181d02fa37/5f767b51.jpg',
        'https://img11.360buyimg.com/da/s590x470_jfs/t1/103273/25/13215/145143/5e547ad1E366916b8/6a05fa6ddaa406ec.jpg.webp',
        'https://img30.360buyimg.com/pop/s590x470_jfs/t1/94535/6/13599/71736/5e57d207E82700b76/806ef88d0a02e7b7.jpg.webp',
        'https://img30.360buyimg.com/pop/s590x470_jfs/t1/102593/7/12012/84454/5e414500E9845fc24/c2cf9a190c434778.jpg.webp',
        'https://img20.360buyimg.com/da/s590x470_jfs/t1/96626/31/13872/81442/5e5db887E5058489c/b6ac924ce9206a05.jpg.webp',
        'https://imgcps.jd.com/ling/11212486905/5aWz56We6KOF5a626ZKc5oOg/5q-P5ruhMzAw5YePMzA/p-5bd8253082acdd181d02fa37/5f767b51.jpg',
        'https://img11.360buyimg.com/da/s590x470_jfs/t1/103273/25/13215/145143/5e547ad1E366916b8/6a05fa6ddaa406ec.jpg.webp',
        'https://img30.360buyimg.com/pop/s590x470_jfs/t1/94535/6/13599/71736/5e57d207E82700b76/806ef88d0a02e7b7.jpg.webp',
        'https://img30.360buyimg.com/pop/s590x470_jfs/t1/102593/7/12012/84454/5e414500E9845fc24/c2cf9a190c434778.jpg.webp'
      ]
    }
  },
  methods: {
    change() {
      this.opacity = 0
      setTimeout(()=>{
        this.opacity = 1
        if(++this.current >= this.images.length) {
          this.current=0
        }
      }, 100)
    }
  },
  mounted() {
    if(this.interval === null) {
      setInterval(this.change, this.seconds)
    }
  },
  destroyed() {
    clearInterval(this.interval)
  },
}
</script>

<style lang="scss">
  .swiper {
    position: relative;
    img {
      transition: all .3s;
      width: 100%;
    }
    ul {
      position: absolute;
      bottom: 10px;
      left: 20px;
    }
    li {
      display: inline-block;
      opacity: .5;
      border-radius: 50%;
      padding: 5px;
      background-color: #fff;
      margin-right: 5px;
    }
    .current {
      margin-right: 8px;
      margin-left: 3px;
      opacity: 1;
      &:before {
        content: "";
        display: block;
        background: #fff;
        border-radius: 50%;
        padding: 8px;
        position: absolute;
        transform: translate(-50%, -50%);
        opacity: .5;
      }
    }
  }
</style>
